<template>
	<div style="display: flex">
		<div class="photos" style="margin-right: 10px">
			<div style="width: 100px; height: 100px" v-if="!modelValue">
				<div class="el-image__noset">未设置</div>
			</div>
			<el-image style="width: 100px; height: 100px" v-else :src="showUrl" />
			<div class="cl-upload__actions">
				<span class="cl-upload__actions-preview" @click.stop="openPop()">
					<i class="el-icon-edit"></i>
				</span>

				<span
					class="cl-upload__actions-preview"
					v-show="isActions"
					@click.stop="_onPreview()"
				>
					<i class="el-icon-zoom-in"></i>
				</span>

				<span class="cl-upload__actions-delete" v-show="isActions" @click.stop="claerImg()">
					<i class="el-icon-delete"></i>
				</span>
			</div>
		</div>
		<gdshop-upload-space
			ref="space"
			:showButton="false"
			:limit="1"
			:value="modelValue"
			:detailData="true"
			@confirm="confirm"
		/>
		<!--		<el-button-group>
			<el-button icon="el-icon-edit" @click="openPop()" />
			<el-button icon="el-icon-delete" @click="claerImg()" />
		</el-button-group>-->
	</div>
	<cl-dialog
		v-model="preview.visible"
		title="图片预览"
		:props="{
			width: previewWidth
		}"
	>
		<img style="width: 100%" :src="preview.url" alt="" />
	</cl-dialog>
</template>

<script>
export default {
	name: "cover-select",
	props: {
		// 绑定值
		modelValue: String,
		baseUrl: String
	},
	emits: ["update:modelValue", "update:baseUrl"],
	data() {
		return {
			previewWidth: "500px",
			preview: {
				visible: false,
				url: ""
			}
		};
	},
	computed: {
		showUrl() {
			if (this.isLegalHttpUrl(this.modelValue)) {
				return this.modelValue;
			} else {
				return this.baseUrl + this.modelValue;
			}
		},
		isActions() {
			return this.modelValue;
		}
	},
	methods: {
		isLegalHttpUrl(v) {
			return /^(http|https):\/\/[\S]+$/.test(v) === true;
		},
		openPop() {
			// console.log(this.modelValue)
			this.$refs.space.open();
		},
		// 预览图片
		_onPreview() {
			this.preview.visible = true;
			this.preview.url = this.showUrl;
		},
		confirm(data) {
			this.$emit("update:modelValue", data[0].url);
			this.$emit("update:baseUrl", data[0].base_url);
		},
		claerImg() {
			this.$emit("update:modelValue", "");
		}
	}
};
</script>

<style lang="scss">
.photos {
	position: relative;
	.cl-upload__actions {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		cursor: default;
		text-align: center;
		color: #fff;
		opacity: 0;
		font-size: 20px;
		background-color: rgba(0, 0, 0, 0.5);
		-webkit-transition: opacity 0.3s;
		transition: opacity 0.3s;

		&::after {
			display: inline-block;
			content: "";
			height: 100%;
			vertical-align: middle;
		}

		span {
			display: none;
			cursor: pointer;
		}

		span + span {
			margin-left: 15px;
		}

		i {
			color: #fff;
			font-size: 20px;
		}
	}
	&:hover {
		border-color: $color-primary;

		.cl-upload__actions {
			opacity: 1;

			span {
				display: inline-block;
			}
		}
	}
	.el-image__noset {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		background: #f5f7fa;
		color: #c0c4cc;
		vertical-align: middle;
		width: 100%;
		height: 100%;
	}
}
</style>
